<template>
  <div class="container" v-loading="loading">
    <div class="toolbar">
      <div class="inner-toolbar">
        <div class="toolbar-btns">
          <el-button size="mini" type="primary" @click="handleAddGoods()">添加商品</el-button>
          <el-button size="mini" type="primary" @click="handleBatchOnShelf()">批量上架</el-button>
          <el-button size="mini" type="primary" @click="handleBatchOffShelf()">批量下架</el-button>
          <el-button size="mini" type="primary" @click="handleBatchDelete()">删除</el-button>
          <el-button size="mini" type="primary" @click="handleBatchSave()">批量保存</el-button>
        </div>
        <div class="toolbar-search">
          <en-table-search 
          @search="searchEvent" 
          @advancedSearch="advancedSearchEvent"
          advanced
          advancedWidth="550">
            <template slot="advanced-content">
              <el-form :model="advancedForm" label-width="90px" ref="advancedForm">
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="商品名称:" prop="mingchneg">
                      <el-input v-model="advancedForm.mingchneg" placeholder="商品名称"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="砍价模式:" prop="moshi">
                      <el-select v-model="advancedForm.moshi" placeholder="砍价模式">
                        <el-option 
                        v-for="(item,index) in modes"
                        :key="index"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="商品状态" prop="">
                      <el-select v-model="advancedForm" placeholder="商品状态">
                        <el-option :label="待上线" :value="0"></el-option>
                        <el-option :label="已上线" :value="1"></el-option>
                        <el-option :label="已下线" :value="2"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="所属店铺" prop="">
                      <el-select v-model="advancedForm" placeholder="所属店铺">
                        <el-option label="贵公子旗舰店" :value="0"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </template>
          </en-table-search>
        </div>
      </div>
    </div>
    <el-form :model="tableDataForm" :rules="tableDataFormRules" ref="tableDataForm">
      <el-table ref="table" :data="tableDataForm.data" @selection-change="selectionChange" highlight-current-row
        :height="tableHeight">
        <el-table-column fixed type="selection" width="55" />
        <el-table-column prop="" label="商品状态" min-width="70">
          <template slot-scope="scope">
            <span v-html="scope.row"></span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="所属店铺" min-width="100">
          <template slot-scope="scope">
            <span v-html="scope.row"></span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="商品上架" min-width="100">
          <template slot-scope="scope">
            <span :class="scope.row.status==40?'font-color':scope.row.status==50?'color-success':''"></span>
          </template>
        </el-table-column>
        <el-table-column label="商品大图" prop="" min-width="90">
          <template slot-scope="scope">
            <img class="img_width" :src="scope.row.thumbnail" />
          </template>
        </el-table-column>
        <el-table-column prop="" label="商品名称, 规格" min-width="140">
          <template slot-scope="scope">
            <span v-html="scope.row"></span>
          </template>
        </el-table-column>
        <el-table-column label="优先级" prop="priority" min-width="120">
          <template slot-scope="scope">
            <el-form-item :prop="'data.'+scope.$index+'.priority'" :rules="goodsListRules.priority">
              <el-input class="input-width" v-model="scope.row.priority" size="mini" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="成本价" prop="cost" min-width="100">
          <template slot="header" slot-scope="{}">
            <span class="font-color">*</span>
            <span>成本价</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'data.'+scope.$index+'.cost'" :rules="goodsListRules.cost">
              <el-input class="input-width" v-model="scope.row.cost" size="mini">
                <template slot="prepend">¥</template>
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="市场价" prop="cost" min-width="100">
          <template slot="header" slot-scope="{}">
            <span class="font-color">*</span>
            <span>市场价</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'data.'+scope.$index+'.cost'" :rules="goodsListRules.cost">
              <el-input class="input-width" v-model="scope.row.cost" size="mini">
                <template slot="prepend">¥</template>
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="店铺价" prop="cost" min-width="100">
          <template slot="header" slot-scope="{}">
            <span class="font-color">*</span>
            <span>店铺价</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'data.'+scope.$index+'.cost'" :rules="goodsListRules.cost">
              <el-input class="input-width" v-model="scope.row.cost" size="mini">
                <template slot="prepend">¥</template>
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="展示价" prop="visual_num" min-width="100" align="center">
          <template slot="header">
            <span class="font-color">*</span>
            <span>展示价</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'data.'+scope.$index+'.visual_num'" :rules="goodsListRules.visual_num">
              <el-input class="input-width" v-model="scope.row.visual_num" size="mini" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="砍价商品数量" prop="visual_num" min-width="120" align="center">
          <template slot="header">
            <span class="font-color">*</span>
            <span>砍价商品数量</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'data.'+scope.$index+'.visual_num'" :rules="goodsListRules.visual_num">
              <el-input class="input-width" v-model="scope.row.visual_num" size="mini" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="单次最高砍价" prop="visual_num" min-width="120" align="center">
          <template slot="header">
            <span class="font-color">*</span>
            <span>单次最高砍价</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'data.'+scope.$index+'.visual_num'" :rules="goodsListRules.visual_num">
              <el-input class="input-width" v-model="scope.row.visual_num" size="mini" />
            </el-form-item>
          </template>
        </el-table-column>    
        <el-table-column label="虚拟砍价人数" prop="visual_num" min-width="120" align="center">
          <template slot="header">
            <span class="font-color">*</span>
            <span>虚拟砍价人数</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'data.'+scope.$index+'.visual_num'" :rules="goodsListRules.visual_num">
              <el-input class="input-width" v-model="scope.row.visual_num" size="mini" />
            </el-form-item>
          </template>
        </el-table-column>    
        <el-table-column label="砍价模式" prop="visual_num" min-width="100" align="center">
          <template slot="header">
            <span class="font-color">*</span>
            <span>砍价模式</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'data.'+scope.$index+'.visual_num'" :rules="goodsListRules.visual_num">
              <el-select class="input-width" v-model="scope.row.visual_num" size="mini" >
                <el-option label="砍到0元免费拿" value="0"></el-option>
                <el-option label="砍多少减多少" value="1"></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>    
        <el-table-column label="商品可砍金额" prop="" min-width="120" align="center">
          <template slot="header">
            <span class="font-color">*</span>
            <span>商品可砍金额</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'data.'+scope.$index+'.visual_num'" :rules="goodsListRules.visual_num">
              <el-input class="input-width" v-model="scope.row.visual_num" size="mini" />
            </el-form-item>
          </template>
        </el-table-column>  
        <el-table-column label="砍价时长(小时)" prop="visual_num" min-width="120" align="center">
          <template slot="header">
            <span class="font-color">*</span>
            <span>砍价时长</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'data.'+scope.$index+'.visual_num'" :rules="goodsListRules.visual_num">
              <el-input class="input-width" v-model="scope.row.visual_num" size="mini" />
            </el-form-item>
          </template>
        </el-table-column>       
        <el-table-column label="首刀砍价比例" prop="first_rate" align="center" min-width="120">
          <template slot="header">
            <span class="font-color">*</span>
            <span>首刀砍价比例</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'data.'+scope.$index+'.first_rate'" :rules="goodsListRules.first_rate">
              <el-input class="input-width" v-model="scope.row.first_rate" size="mini">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="最少砍价人数" prop="visual_num" min-width="120" align="center">
          <template slot="header">
            <span class="font-color">*</span>
            <span>最少砍价人数</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'data.'+scope.$index+'.visual_num'" :rules="goodsListRules.visual_num">
              <el-input class="input-width" v-model="scope.row.visual_num" size="mini" />
            </el-form-item>
          </template>
        </el-table-column>   
        <el-table-column label="最多砍价人数" prop="visual_num" min-width="120" align="center">
          <template slot="header">
            <span class="font-color">*</span>
            <span>最多砍价人数</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'data.'+scope.$index+'.visual_num'" :rules="goodsListRules.visual_num">
              <el-input class="input-width" v-model="scope.row.visual_num" size="mini" />
            </el-form-item>
          </template>
        </el-table-column>   
        <el-table-column label="最多砍价刀数" prop="visual_num" min-width="120" align="center">
          <template slot="header">
            <span class="font-color">*</span>
            <span>最多砍价刀数</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'data.'+scope.$index+'.visual_num'" :rules="goodsListRules.visual_num">
              <el-input class="input-width" v-model="scope.row.visual_num" size="mini" />
            </el-form-item>
          </template>
        </el-table-column>   
        <el-table-column label="转发分享文案" prop="visual_num" min-width="120" align="center">
          <template slot="header">
            <span class="font-color">*</span>
            <span>转发分享文案</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'data.'+scope.$index+'.visual_num'" :rules="goodsListRules.visual_num">
              <el-input class="input-width" v-model="scope.row.visual_num" size="mini" />
            </el-form-item>
          </template>
        </el-table-column>   
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button v-if="scope" type="primary" size="mini" @click="handleOnShelf(scope.row)">上架</el-button>
            <el-button v-else type="danger" size="mini"  @click="handleOffShelf(scope.row)">下架
            </el-button>
            <el-button type="primary" size="mini" @click="handleSave(scope.$index, scope.row)">保存</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div class="bottom-total">
      <el-pagination
        slot="pagination"
        v-if="pageData"
        @size-change="handlePageSizeChange"
        @current-change="handlePageCurrentChange"
        :current-page="params.page_no"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="params.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data_total">
      </el-pagination>
    </div>
    <!-- 商品选择器 -->
    <GoodsSkuPicker
      type="seller"
      goods-type="NORMAL"
      :show="showDialog"
      :sku="true"
      :api="goodsApi"
      :multipleApi="multipleApi"
      :defaultData="skuIds"
      :categoryApi="categoryApi"
      :limit="maxsize"
      @confirm="refreshFunc"
      @close="showDialog = false"/>
  </div>
</template>

<script>
import GoodsSkuPicker from '@/components/GoodsSkuPicker'
export default {
  name: 'bargain-goods',
  components: {
    GoodsSkuPicker
  },
  data() {
    return {
      // 多选
      multipleSelection: [],
      /** 列表loading状态 */
      loading: false,
      // table表单
      tableDataForm: {
        data: []
      },
      // 查询参数
      advancedForm: {
        mingchneg: undefined,
        moshi: undefined
      },
      /** 列表参数 */
      params: {
        page_no: 1,
        page_size: 10
      },
      // 总条数
      data_total: 0,
      // 分页数据
      pageData: {},
      skuIds: [],
      // 商品选择器弹框     
      showDialog: false,
      /** 商品选择器最大长度*/
      maxsize: 0,
      /** 商品选择器列表api*/
      goodsApi: 'seller/goods/skus?market_enable=1&is_auth=1',
      multipleApi: 'seller/goods/skus/@ids/details',
      /** 商城分类api */
      categoryApi: 'seller/goods/category/0/children', 
      //商品列表验证
      tableDataFormRules: {
        shetuan_price: [{
          required: true,
          message: '请输入有效值',
          trigger: 'blur'
        },
        {
          pattern: /^[0-9]+.?[0-9]*$/,
          message: '请输入整数或小数！'
        }
        ],
        goods_num: [{
          required: true,
          message: '请输入有效值',
          trigger: 'blur'
        },
        {
          pattern: /^[1-9][0-9]*$/,
          message: '请输入整数！'
        }
        ],
        visual_num: [{
          required: true,
          message: '请输入有效值',
          trigger: 'blur'
        },
        {
          pattern: /^[0-9]*$/,
          message: '请输入整数！'
        }
        ],
        limit_num: [{
          pattern: /^([0-9]|\s)*$/,
          message: '请输入整数！'
        }],
        first_rate: [{
          required: true,
          message: '请输入有效值',
          trigger: 'blur'
        },
        {
          pattern: /^([0-9]+\.[0-9]|\d)*$/,
          message: '请输入整数或小数！'
        }
        ],
        second_rate: [{
          required: true,
          message: '请输入有效值',
          trigger: 'blur'
        },
        {
          pattern: /^([0-9]+\.[0-9]|\d)*$/,
          message: '请输入整数或小数！'
        }
        ],
        self_raising_rate: [{
          required: true,
          message: '请输入有效值',
          trigger: 'blur'
        },
        {
          pattern: /^([0-9]+\.[0-9]|\d)*$/,
          message: '请输入整数或小数！'
        }
        ],
        invite_rate: [{
          required: true,
          message: '请输入有效值',
          trigger: 'blur'
        },
        {
          pattern: /^([0-9]+\.[0-9]|\d|\s)*$/,
          message: '请输入整数或小数！'
        }
        ],
        priority: [
          {
            required: true,
            message: '请输入有效值',
            trigger: 'blur'
          },
          {
            pattern: /^[0-9]+$/,
            message: '请输入正整数'
          }
        ],
        cost: [
          {
            required: true,
            message: '请输入有效值',
            trigger: 'blur'
          },
          {
            pattern: /^([0-9]+\.[0-9]|\d|\s)*$/,
            message: '请输入整数或小数！'
          }
        ]
      },
      status: [
        {
          label: '待上线',
          value: 10
        },
        {
          label: '已上线',
          value: 20
        },
        {
          label: '已下线',
          value: 30
        }
      ],
      modes: [
        {
          label: '砍到0元免费拿',
          value: 0
        },
        {
          label: '看多少,jian',
          value: 1
        }
      ]
    }
  },
  computed: {
    tableHeight (){
      return document.documentElement.clientHeight - 246 + 'px';
    }
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    /**
      * @date 2020/10/23
      * @author kaiqiang
      * @description { 获取砍价商品列表 }
    */
    getDataList() {
      
    },
    /** 分页大小发生改变 */
    handlePageSizeChange(size) {
      this.params.page_size = size;
      this.getDataList();
    },
    /** 分页页数发生改变 */
    handlePageCurrentChange(page) {
      this.params.page_no = page;
      this.getDataList();
    },
    /**
      * @date 2020/10/23
      * @author kaiqiang
      * @description { 添加商品 }
    */
    handleAddGoods(index) {
      this.showDialog = true;
    },
    /**
      * @date 2020/10/22
      * @author kaiqiang
      * @description { 查看商品状态 }
    */
    handleSelect(event) {
      this.params = {
        ...this.params,
        status: event
      }
      this.getDataList();
    },
    /**
      * @date 2020/10/23
      * @author kaiqiang
      * @description { 模糊查询 }
    */
    searchEvent(event) {
      this.params = {
        ...this.params,
        status: event
      }
      this.getDataList();
    },
    /**
      * @date 2020/10/23
      * @author kaiqiang
      * @description { 高级搜索查询 }
    */
    advancedSearchEvent(event) {
      this.params = {
        ...this.params,
        statut: event
      }
    },
    /**
      * @date 2020/10/23
      * @author kaiqiang
      * @description { 保存选中的商品 }
    */
    refreshFunc(value) {
      
    },
    selectionChange(value) {
      this.multipleSelection = value;
    },
    /**
      * @date 2020/10/23
      * @author kaiqiang
      * @description { 上架 }
    */
    handleOnShelf() {
      this.$confirm('确认要上架这些吗?')
        .then(_ => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
        .catch(_ => {
          this.$message({
            type: 'warning',
            message: '操作已取消!'
          })
        }) 
    },
    /**
      * @date 2020/10/23
      * @author kaiqiang
      * @description { 下架 }
    */
    handleOffShelf() {
      this.$confirm('确认要下架这些吗?')
        .then(_ => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
        .catch(_ => {
          this.$message({
            type: 'warning',
            message: '操作已取消!'
          })
        }) 
    },
    /**
      * @date 2020/10/23
      * @author kaiqiang
      * @description { 保存 }
    */
    handleSave() {
      this.$message({
        type: 'success',
        message: '保存成功!'
      })
    },
    /**
      * @date 2020/10/23
      * @author kaiqiang
      * @description { 批量上架 }
    */
    handleBatchOnShelf() {
      if (!this.multipleSelection.length) {
        this.$message({
          type: 'warning',
          message: '您还没有选择数据哦!!!'
        })
        return
      }
      this.$confirm('确认要上架这些吗?')
        .then(_ => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
        .catch(_ => {
          this.$message({
            type: 'warning',
            message: '操作已取消!'
          })
        }) 
    },
    /**
      * @date 2020/10/23
      * @author kaiqiang
      * @description { 批量下架 }
    */
    handleBatchOffShelf() {
      if (!this.multipleSelection.length) {
        this.$message({
          type: 'warning',
          message: '您还没有选择数据哦!!!'
        })
        return
      }
      this.$confirm('确认要下架这些吗?')
        .then(_ => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
        .catch(_ => {
          this.$message({
            type: 'warning',
            message: '操作已取消!'
          })
        }) 
    },
    /**
      * @date 2020/10/23
      * @author kaiqiang
      * @description { 批量删除 }
    */
    handleBatchDelete() {
      if (!this.multipleSelection.length) {
        this.$message({
          type: 'warning',
          message: '您还没有选择数据哦!!!'
        })
        return
      }
      this.$confirm('确认要删除这些吗?')
        .then(_ => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
        .catch(_ => {
          this.$message({
            type: 'warning',
            message: '操作已取消!'
          })
        }) 
    },
    /**
      * @date 2020/10/23
      * @author kaiqiang
      * @description { 批量保存 }
    */
    handleBatchSave() {
      if (!this.multipleSelection.length) {
        this.$message({
          type: 'warning',
          message: '您还没有选择数据哦!!!'
        })  
        return
      }
      this.$confirm('确认要保存这些数据吗?')
        .then(_ => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
        .catch(_ => {
          this.$message({
            type: 'warning',
            message: '操作已取消!'
          })
        }) 
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
  /deep/ div.toolbar {
    height: 70px;
    padding: 20px 0;
  }
  .container {
    width: 100%;
    height: 100%;
    position: relative;

    .input-width {
      width: 86px;
    }
  }

  /deep/ .el-table {
    width: 100%;
    overflow-x: scroll;
    & th:not(.is-left),
    & td:not(.is-left) {
      text-align: center;
    }
  }

  /deep/ .el-table__body {
    .el-form-item {
      margin-bottom: 0;
    }

    .el-input-group__prepend {
      padding: 0 12px;
    }

    .el-input-group__append {
      padding: 0 10px;
    }

    .el-form-item__content {
      position: static;
    }

    .el-form-item__error {
      display: inline-block;
      margin-top: -20px;
      margin-left: 12px;
    }

    .cat-show-box {
      display: inline-block;
      position: relative;
      padding-right: 26px;
      max-width: 100%;
      .cat-show-item {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .cat-edit {
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -8px;
        line-height: 0;
        .table-edit {
          display: inline-block;
          width: 16px;
          height: 16px;
          line-height: 16px;
          color: #409EFF;
          font-size: 16px;
        }
        &:hover {
          text-decoration: underline;
        }
      }
    }

    .show-cat-name {
      display: inline-block;
      position: relative;
      padding-right: 20px;

      .cat-name {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 14px;
      }

      .table-edit {
        display: inline-block;
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -8px;
        width: 16px;
        height: 16px;
        line-height: 16px;
        font-size: 16px;
      }
    }

    .el-icon-edit-outline {
      cursor: pointer;
    }
  }

  .color-success {
    color: #30B08F !important;
  }

  .font-color {
    color: red !important;
  }

  /** 工具栏样式 */
  .toolbar {
    display: flex;
    align-items: center;
    height: 44px;
    border-bottom: 1px solid #e6ebf5;
    background-color: #fff;
  }

  .inner-toolbar {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0 20px;
  }

  .el-select {
    width: 100px;
  }

  .el-input__inner {
    text-align: center !important;
  }

  .img_width {
    width: 60px;
    height: 60px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .bottom-total {
    padding-top: 10px;
    text-align: right;
  }

  div.toolbar-btns {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    .el-button {
      margin-right: 10px;
      & + .el-button {
        margin-left: 0;
      }
    }
    div {
      span {
        display: inline-block;
        font-size: 14px;
        color: #606266;
      }
    }
  }
</style>